{% extends 'base.html' %}

{% load static %}

{% block title %}
    个人信息
{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    {#    <link rel="stylesheet" href="{% static 'css/boot.css' %}">#}
{% endblock %}

{% block body %}
    <div class="main_con clearfix">
        <div class="left_menu_con clearfix">
            <h3>用户中心</h3>
            <ul>
                <li><a href="{% url 'user:user_center_info' %}" class="active">· 个人信息</a></li>
                {#				<li><a href="{% url 'user:user_center_order' %}">· 我的订单</a></li>#}
            </ul>
        </div>
        <div class="right_content clearfix">
            <div class="info_con clearfix">
                <h3 class="common_title2">基本信息</h3>
                {#                        编辑按钮,弹框#}
                <div class="ed" style="float: right; margin: 50px 10px 0 0 ">
                    <!-- Button trigger modal -->
                    <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#myModal">
                        修改信息
                    </button>

                    <!-- Modal -->
                    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
                        <div class="modal-dialog" role="document">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                            aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="myModalLabel">编辑地址</h4>
                                </div>
                                <div class="modal-body">
                                    <form class="form-horizontal">
                                        <div class="form-group">
                                            <label for="collage" class="col-sm-2 control-label">学院</label>
                                            <div class="col-sm-10">
                                                <select class="form-control-1" id="collage" style="float: left"
                                                        name="user_colloge_id">
                                                    {% for college in all_colleges %}
                                                        <option value="{{ college.id }}" name="user_colloge_id"
                                                                selected="selected">{{ college.college_name }}</option>
                                                    {% endfor %}

                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="user_name" class="col-sm-2 control-label">姓名：</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" id="user_name" value="{{ user_name }} "
                                                       name="user_name">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="user_mobile" class="col-sm-2 control-label">手机号：</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" id="user_mobile"
                                                       value="{{ user_mobile }}" name="user_mobile">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="adr" class="col-sm-2 control-label">联系地址</label>

                                            <div class="col-sm-10">
                                                <select class="form-control-1" id="adr" style="float: left " name="dormitory_building_id">
                                                    {% for dormitory_building in all_dormitory_buildings %}
                                                        <option value="{{ dormitory_building.id }}"
                                                                id="dormitory_building_id" name="dormitory_building_id">{{ dormitory_building.dormitory_building_name }}号楼
                                                        </option>
                                                    {% endfor %}


                                                </select>
                                                <select class="form-control-1" id="adr" style="float: left " name="dormitory_id">
                                                    {% for dormitory in all_dormitories %}
                                                        <option value="{{ dormitory.id }}" id="dormitory_id" name="dormitory_id">{{ dormitory.dormitory_num }}</option>
                                                    {% endfor %}

                                                </select>
                                                <label for="user_remark">其他：<input type="text" id="user_remark"
                                                                                    placeholder="非必填" value="{{ user_remark }}" ></label>
                                            </div>
                                        </div>
                                    </form>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                                    <button type="button" class="btn btn-primary" id="save">保存</button>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <ul class="user_info_list">
                    <li><span>学院：</span>{{ user_colege }}</li>
                    <li><span>学号：</span>{{ user_sno }}</li>
                    <li><span>姓名：</span>{{ user_name }}</li>
                    <li><span>手机号：</span>{{ user_mobile }}</li>
                    <li><span>联系地址：</span>{{ user_dormitory_building_name }}楼||{{ user_dormitory_num }}宿舍</li>
                    <li><span>备注：</span>{{ user_remark }}</li>
                </ul>
            </div>
        </div>
    </div>
    {% block js %}
        <script src="{% static 'js/bootstrap.min.js' %}"></script>

        {#编辑信息提交#}
        <script>
            $("#save").click(function () {
                var user_colloge_id = $("select[name='user_colloge_id']").val();

                var user_id = {{ request.session.user_id }};
                var user_name = $('#user_name').val();
                var user_mobile = $('#user_mobile').val();
                var dormitory_building_id = $("select[name='dormitory_building_id']").val();
                var dormitory_id = $("select[name='dormitory_id']").val();
                var user_remark = $('#user_remark').val();


                $.ajax({
                    url: "{% url 'user:user_center_info' %}",
                    type: "post",
                    data: {
                        'csrfmiddlewaretoken': '{{ csrf_token }}',
                        {#用户信息#}
                        'user_colloge_id': user_colloge_id,
                        'user_id': user_id,
                        'user_name': user_name,
                        'user_mobile': user_mobile,
                        'dormitory_building_id': dormitory_building_id,
                        'dormitory_id':dormitory_id,
                        'user_remark':user_remark
                    },
                    success: function (date) {
                        alert('修改成功');
                        window.location.reload();
                    }

                })
            })
        </script>


    {% endblock %}
{% endblock %}